import { ContactData } from "./interface";
import { useState } from "react";

interface ContactProps {
  contact: ContactData;
}
function Contact({ contact }: ContactProps) {
  const [expanded, setExpanded] = useState(false);

  return (
    <>
      <p>
        <b>{contact.name}</b>
      </p>
      {expanded && (
        <p>
          {" "}
          <i>{contact.email}</i>{" "}
        </p>
      )}

      <button onClick={() => setExpanded(!expanded)}>{expanded ? "隐藏" : "显示"}邮箱</button>
    </>
  );
}

export default Contact;
